:root {
  --m256: 68.26vw;
  --listM: 88vw;
  --pc256: 320.68px;
  --listPC: 410px;
}
.notifications {
  
}
.wrap {
  // height: 100%;
  border-top: 1px solid var(--main-split);
}

.menu {
  display: flex;
  align-items: center;
  width: var(--m256);
  height: var(--m36);
  margin: var(--m10) auto var(--m14);
  border: var(--m10);
  background: #FAFAFE;
  border-radius: var(--m10);
}

.menuItem {
  position: relative;
  width: var(--m126);
  height: var(--m32);
  line-height: var(--m32);
  font-size: var(--m11);
  font-family: Montserrat-Regular;
  font-weight: 400;
  color: #B1B2BC;
  text-align: center;
  border-radius: var(--m10);
  &.active {
    background: #4F48E2;
    color: #fff;
  }
}
.dot {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--m6);
  height: var(--m6);
  background: #CF3F3F;
  border-radius: 100%;
}

.list {
  overflow: hidden;
  height: var(--listM);
  overflow-y: auto;
}

.listItem {
  margin: 0 auto var(--m8);
  padding: 0 var(--m12);
  width: var(--m256);
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--m12);
  overflow: hidden;
  .hd {
    margin: var(--m8) 0 0;
    font-size: var(--m13);
    font-family: Montserrat-Regular;
    font-weight: 400;
    color: #0F0F10;
    line-height: 1.2;
  }

  .titlePrefix {
    padding: 0 var(--m6) 0 0;
    &.expired {
      color: #CF3F3F;
    }
  }
  .content {
    margin: var(--m2) 0 var(--m12) 0;
    font-size: var(--m11);
    font-family: Montserrat-Light;
    font-weight: 300;
    color: #2A2A2C;
    line-height: 1.2;
  }

  .meta {
    display: flex;
    margin: 0 0 var(--m4);
    justify-content: space-between;
  }

  .date {
    height: var(--m12);
    font-size: var(--m9);
    font-family: Montserrat-Light;
    font-weight: 300;
    color: #7E8189;
    line-height: 1.2;
  }

  .info {
    height: var(--m12);
    font-size: var(--m9);
    font-family: Montserrat-Regular;
    font-weight: 400;
    color: #4F48E2;
  }
}
.detailItem {
  margin: 0 auto var(--m8);
  padding: 0 var(--m12);
  width: var(--m256);
  overflow: hidden;
  box-sizing: content-box;
  .date {
    margin: 0 0 var(--m4);
    font-size: var(--m9);
    text-align: center;
    font-family: Montserrat-Light;
    font-weight: 300;
    color: #7E8189;
    line-height: 1.3;
  }
  .box {
    padding: var(--m12);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--m12);
  }
  .hd {
    margin: 0 0 var(--m8);
    font-size: var(--m13);
    font-family: Montserrat-Regular;
    font-weight: 400;
    color: #0F0F10;
    line-height: 1.2;
  }
  .content {
    font-size: var(--m11);
    font-family: Montserrat-Light;
    font-weight: 300;
    color: #3F3F40;
    line-height: 1.2;
    white-space: pre-wrap;
    word-break: break-word;
  }
}
.noData {
  font-family: Montserrat-Light;
  padding: var(--m10) 0;
  text-align: center;
  font-size: var(--m12);
  color: #7E8189;
}
@media screen and (min-width:1280px) {
  .notifications {
    
  }
  .wrap {
  }

  .menu {
    width: var(--pc256);
    height: var(--pc36);
    margin: var(--pc10) auto var(--pc14);
    border: var(--pc10);
    border-radius: var(--pc10);
  }

  .menuItem {
    position: relative;
    width: var(--pc126);
    height: var(--pc32);
    line-height: var(--pc32);
    font-size: var(--pc11);
    border-radius: var(--pc10);
  }

  .dot {
    width: var(--pc6);
    height: var(--pc6);
  }

  .list {
    height: var(--listPC);
  }

  .listItem {
    margin: 0 auto var(--pc8);
    padding: 0 var(--pc12);
    width: var(--pc256);
    border-radius: var(--pc12);
    .hd {
      margin: var(--pc8) 0 0;
      font-size: var(--pc13);
    }

    .content {
      margin: var(--pc2) 0 var(--pc12) 0;
      font-size: var(--pc11);
    }

    .meta {
      margin: 0 0 var(--pc4);
    }

    .date {
      height: var(--pc12);
      font-size: var(--pc9);
    }

    .info {
      height: var(--pc12);
      font-size: var(--pc9);
    }
  }
  .detailItem {
    margin: 0 auto var(--pc8);
    padding: 0 var(--pc12);
    width: var(--pc256);

    .date {
      margin: 0 0 var(--pc4);
      font-size: var(--pc9);
    }

    .box {
      padding: var(--pc12);
      border-radius: var(--pc12);
    }

    .hd {
      margin: 0 0 var(--pc8);
      font-size: var(--pc13);
    }

    .content {
      font-size: var(--pc11);
      font-family: Montserrat-Light;
    }
  }
  .noData {
    padding: var(--pc10) 0;
    font-size: var(--pc12);
  }
}
